<template>
  <div class="echart" id="photoVoltaicPower"></div>
</template>
<script>
import echart from 'echarts'
import { twoLine } from '@/api/scada'

export default {
  name: "echart",
  props: {},
  data() {
    return {

      option: {
        textStyle: {
          fontWeight: 400,
          fontSize: 14,
          color: '#666'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          textStyle: {
            fontWeight: 400,
            fontSize: 14,
            color: '#666'
          },
          icon: 'circle',
          selectedMode: true,
          right:50
        },
        grid: {
          left: 20,
          bottom: 20,
          top: 50,
          right: 50,
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [],
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#E8E8E8",
              width: 1
            }
          }

        },

        yAxis:
          [
            {
              name: '单位(kW)',
              nameTextStyle: {
                fontWeight: 400,
                fontSize: 14,
                color: '#666'
              },
              type: 'value',
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false
              },
              splitLine: {
                lineStyle: {
                  color: "#E8E8E8"
                }
              },
            },
          ],
        series: [
          {
            name: '昨日',
            showSymbol: false,
            data: [],
            type: 'line',
            itemStyle: {
                color: "#92D66E"
            },
            smooth: true
          },
          {
            name: '今日',
            showSymbol: false,
            data: [],
            type: 'line',
            itemStyle: {
                color: "#46A4F7"
            },
            smooth: true
          },
        ]
      }

    };
  },

  mounted() {
    let echartBox = document.querySelector('#photoVoltaicPower')
    let myCahrt = echart.init(echartBox)
      twoLine().then(res=>{
          let arr = []
          if(res.code===200) {
              arr = res.result || {};
              let today =  arr.todayLine
              let yesterday =  arr.yesterdayLine
              this.option.xAxis.data = today.map(item=>item.dataTime)
              this.option.series[0].data = yesterday.map(item=>+item.loadData)
              this.option.series[1].data = today.map(item=>+item.loadData)
              myCahrt.setOption(this.option, true);
          }
      })



  },
  computed: {},
  created() {
  },
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="scss">
  .echart {
    height: 240px;
  }
</style>
